<template>
    <div class="nav-menu">
        <!-- background-color="#ffffff" text-color="#000000" active-text-color="#2d8cf0" -->
        <el-menu :collapse-transition="false" :default-active="defaultActive" @select="handleSelect" :collapse="collapse" class="el-menu-vertical">
            <template v-for="(item,i) in routes">
                <sidebar-item :key="i" :routes="item" v-if="item.hidden!==true" />
            </template>
        </el-menu>
    </div>
</template>

<script>
import { mapState } from "vuex";
import sidebarItem from "./sidebarItem.vue";
export default {
    props: {
        collapse: {
            type: Boolean,
            default: false,
        },
    },
    methods: {
        handleSelect (key, keyPath) {
            this.$router.push({ name: key });
        },
    },
    computed: {
        routes () {
            return this.$router.options.routes;
        },
        defaultActive () {
            const { meta } = this.$route;
            if (meta.activeMenu) {
                return meta.activeMenu;
            }
            return this.$route.name;
        },
        ...mapState(["theme"]),
    },
    components: {
        sidebarItem,
    },
};
</script>

<style lang="scss" scoped>
.nav-menu {
    height: 100%;
    overflow-y: scroll;
    ::v-deep .el-menu {
        height: 100%;
        border-right-width: 0px;
        .iconfont {
            margin: 0 10px 0 5px;
        }
    }
}
::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    // background-color: #f5f5f5;
}
</style>

<style lang="scss">
.el-menu-vertical {
    background: var(--color-menu-bg) !important;
    .el-submenu__title:hover,
    .el-menu-item:hover,
    .el-menu-item:focus {
        background: var(--color-menu-hover);
    }
    .el-submenu__title,
    .el-menu-item {
        background: var(--color-menu-bg);
        color: var(--color-menu-text);
        i {
            color: var(--color-menu-text);
        }
    }
    .is-active {
        color: var(--color-menu-text-active) !important;
    }
}
</style>




